<!--
 * @Description  : 专题详情
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage class="bg-[#f2f2f2]" :header-class="'bg-[#f4f4f4]'">
    <template #center>
      <p class="text-14 color-[#666]">专题</p>
    </template>

    <section bg-white>
      <nut-image :src="topicDetail.moduleImgUrl" height="180" />
      <div p-20>
        <h4>{{ topicDetail.worksName }}</h4>
        <h2>{{ topicDetail.moduleName }}</h2>
        <p>{{ topicDetail.moduleIntro }}</p>
      </div>
    </section>

    <div mt-20 rd-20 bg-white>
      <div v-for="(item, index) in topicDetail.works" :key="item.worksName" p-20>
        <div flex>
          <div relative>
            <nut-image :src="item.imgUrl" width="20vw" height="100" radius="10" @click="toDetail(item.worksName, item.moduleWorksId)" />
            <p absolute bottom-0 rd-bl-20 rd-br-20 text-center class="w-100% bg-[rgba(0,0,0,.5)] text-white text-12">{{ item.typeName }}</p>
          </div>
          <section class="color-[#888888] ml-10">
            <h4 fw-500>{{ item.worksName }}</h4>
            <p text-12 font-bold>{{ item.author }}</p>
            <p class="color-[#888888] text-ellipsis--l2">{{ item.title }}</p>
          </section>
        </div>
        <nut-divider v-if="index !== topicDetail.works.length - 1" :style="{ color: '#e8e8e8' }" />
      </div>
    </div>
    <footer class="footer-border fixed text-12 flex justify-around w-100vw bg-white left-0 bottom-0">
      <div text-center py-5>
        <TheIcon icon="mdi:home-lightning-bolt" :size="24" color="#000" />
        <p>啊啊啊出版社</p>
      </div>
      <div text-center py-5>
        <TheIcon icon="ic:baseline-wechat" :size="24" color="#000" />
        <p>客服</p>
      </div>
    </footer>
    <footer h-75 />
  </AppPage>
</template>

<script setup>
import { worksPack } from '@/api/index'
const route = useRoute()
const router = useRouter()
const topicDetail = ref({})

/** 获取作品专题 */
const getTopic = async () => {
  const result = await worksPack(route.query.moduleId)
  topicDetail.value = result.data
}

/**
 * 跳转作品详情页
 * @param {String} worksName      作品名称
 * @param {String} moduleWorksId  作品模板 id
 */
const toDetail = (worksName, moduleWorksId) => {
  router.push({ name: 'worksDetail', query: { worksName, moduleWorksId } })
}

onMounted(() => {
  getTopic()
})
</script>
<style>
.footer-border {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
</style>
